<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>统计与报告</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="./layui/css/layui.css">
  <link rel="stylesheet" href="./css/style.css">
  <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
  <script src="js/resize.js"></script>

  <style>
      .report-body{display: initial;padding-top: 0.3rem;}
      .report-body .block{
        background:rgba(255,255,255,1);
        border-radius:15px;
      }

      .report-body .view-block{
        /*height:433px;*/
        padding: 0 0.3rem 0.3rem;
        box-sizing: border-box;
      }
      .report-body .view-block .view-block-head{
        height:0.78rem;
        line-height: 0.78rem;
        border-bottom: 1px solid #DADADA;
      }
      .view-block .view-block-head .view-block-tab{
        float: left;
        width: 30%;
      }
      .view-block .view-block-head .view-block-tab a{
        padding-bottom: 8px;
        margin-right: 0.5rem;
        font-size:0.16rem;
        font-weight:400;
        color:rgba(72,72,72,1);
      }
      .view-block .view-block-head .view-block-tab a.select{
        border-bottom: 2px solid #111351;
        color: #111351;}
      .view-block .view-block-head .view-block-date{
        float: right;
        width: 50%;
        text-align: right;
      }
      .view-block .view-block-date .view-date-link{
        float: left;
        padding-left: 13%;
      }
      .view-block .view-block-date .view-date-link a{
        margin: 0 0.12rem;
        font-size:0.14rem;
        font-weight:400;
        color:rgba(72,72,72,1);
      }
      .view-block .view-block-date .view-date-link a.select{color: #111351;}
      .view-block .view-block-date .view-date-inpt{
        float: right;
        padding-top: 0.23rem;
      }
      .view-block .view-block-date .view-date-inpt input{
        float: left;
        height: 0.32rem;
        line-height: 0.32rem;
        margin-right: 0.15rem;
        width: 1.8rem;
        font-size: 0.14rem;
      }
      .view-block .view-block-date .view-date-inpt button{
        float: left;
        width:0.65rem;
        height:0.32rem;
        padding:0;
        line-height: 0.32rem;
        text-align: center;
        background:rgba(17,19,81,1);
        border-radius:4px;
        color: #fff;
      }

      .view-block .view-block-cont{padding-top: 0.3rem;}
      .view-block .view-block-cont .chart-block{
        width: 50%;
        float: left;
      }
      .view-block .view-block-cont .list-block{
        width: 43%;
        float: left;
        margin-left: 5%;
      }
      .view-block .view-block-cont .list-block .box{
        width: 43.7%;
        float: left;
        margin-left: 10%;
      }
      .view-block .view-block-cont .list-block .box:first-child{
        margin-left: 0;
      }
      .view-block .view-block-cont .list-block .box-head h3{
        float: left;
        font-size:0.14rem;
        font-weight:500;
        color:rgba(72,72,72,1);
      }
      .view-block .view-block-cont .list-block .box-head a{
        float: right;
        font-size:0.14rem;
        font-weight:500;
        color:#111351;
      }
      .view-block .list-block .box-cont{padding-top: 0.1rem;}
      .view-block .list-block .box-cont tr td:last-child{
        text-align: right;
      }
      .view-block .list-block .box-cont tr td{
        font-size:0.14rem;
        font-weight:400;
        color:rgba(72,72,72,1);
        line-height: 2.7;
        border-bottom:none;
      }
      .view-block .list-block .box-cont tr td span{
        display: block;
        width:20px;
        height:20px;
        line-height: 20px;
        text-align: center;
        border-radius: 50%;
        color: #484848;
        background:#DADADA;
      }
      .view-block .list-block .box-cont tr td span.bg-num{
        color: #fff;
        background:rgba(17,19,81,1);
      }

      .report-body .two-block{padding-top: 0.3rem;}
      .report-body .two-block .item-block{
        float: left;
        padding:0.3rem;
        box-sizing: border-box;
      }
      .report-body .two-block .item-block .head{
        padding: 0 0 0.3rem;
        border-bottom: 1px solid #E9E9E9;
      }
      .report-body .two-block .item-block .head h3{
        font-size:0.16rem;
        font-weight:400;
        color:rgba(72,72,72,1);
      }
      .report-body .two-block .item-block .content{padding-top: 0.44rem;}
      .report-body .two-block .item-block-1{
        width: 50%;
        height: 6.71rem;
      }
      .report-body .two-block .item-block-2{
        width: 48%;
        /*height: 6.62rem;*/
        margin-left: 2%;
        box-sizing: border-box;
      }
      .two-block .item-block .content-top li{
        width: 50%;
        float: left;
      }
      .two-block .item-block-1 .content-top li{
        width: 20%;
        margin-right: 0.2rem;
      }
      .two-block .item-block .content-top li .title{
        font-size:0.14rem;
        font-weight:400;
        color:rgba(145,145,145,1);
      }
      .two-block .item-block .content-top li .num{
        font-size:0.24rem;
        font-weight:400;
        color:rgba(72,72,72,1);
      }
      .two-block .item-block-2 .content-list{padding-top: 0.3rem;}
      .two-block .item-block-2 .content-list .item{
        width: 46%;
        float: left;
        margin-left: 8%;
      }
      .two-block .item-block-2 .content-list .item:first-child{
        margin-left: 0;
      }
      .two-block .item-block-2 .content-list .item thead tr{
        background:rgba(250,250,250,1);
        border-radius:15px 15px 0px 0px;
      }
      .two-block .item-block-2 .content-list .item thead tr th{
        text-align: center;
        line-height: 2.7;
        font-size:0.14rem;
        font-weight:400;
        color:rgba(72,72,72,1);
      }
      .two-block .item-block-2 .content-list .item tr td{
        text-align: center;
        font-size:0.14rem;
        font-weight:400;
        color:rgba(72,72,72,1);
        line-height: 2.7;
      }
      .two-block .item-block-2 .kw-page{margin-top: 0.2rem;}
      .two-block .item-block-2 .kw-page .page-num{
        width: 68%;
        float: left;
        text-align: right;
      }
      .two-block .item-block-2 .kw-page .page-num a{
        display: inline-block;
        font-size:0.14rem;
        font-weight:400;
        color:rgba(0,0,0,0.65);
        width:0.24rem;
        height:0.24rem;
        text-align: center;
        line-height: 0.24rem;
        background:#fff;
        border-radius:4px;
      }
      .two-block .item-block-2 .kw-page .page-num a.current{
        background:rgba(17,19,81,1);
        color: #fff;
      }
      .two-block .item-block-2 .kw-page .page-total{
        float: left;
        width:0.8rem;
        height:0.24rem;
        margin-left:0.15rem;
        margin-right:0.15rem;
        text-align: center;
        line-height: 0.24rem;
        background:rgba(255,255,255,1);
        border-radius:2px;
        border:1px solid rgba(218,218,218,1);
        font-size:0.14rem;
        font-weight:400;
        color:rgba(72,72,72,1);
        box-sizing: border-box;
      }
      .two-block .item-block-2 .kw-page .page-skip{
        /*width: 20%;*/
        float: left;
      }
      .two-block .item-block-2 .kw-page .page-skip span{
        display: inline-block;
        font-size:0.14rem;
        font-weight:400;
        color:rgba(72,72,72,1);
      }
      .two-block .item-block-2 .kw-page .page-skip input{
        display: inline-block;
        width:0.48rem;
        height:0.24rem;
        line-height: 0.24rem;
        padding-left: 0.08rem;
        background:rgba(255,255,255,1);
        border-radius:2px;
        border:1px solid rgba(218,218,218,1);
        font-size:0.14rem;
        font-weight:400;
        color:rgba(72,72,72,1);
      }


      @media screen and (max-width: 1600px) {
        .view-block .view-block-head .view-block-date{width: 52%;}
        .view-block .list-block .box-cont tr td{line-height: 3;}
      }
      @media screen and (max-width: 1599px) {
        .view-block .view-block-head .view-block-date{width: 53%;}
      }
      @media screen and (max-width: 1400px) {}
      @media screen and (max-width: 1366px) {
        .view-block .view-block-head .view-block-date{width: 55%;}
      }
  </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

  <div class="layui-header">
    <div class="layui-logo"><img src="images/logo.jpg" alt="思联画饰"></div>
    <!-- 头部区域（可配合layui已有的水平导航） -->

    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item serach">
        <a href="javascript:;">
          <img src="images/serach.jpg">
        </a>
      </li>
      <li class="layui-nav-item mess">
        <a href="javascript:;">
          <img src="images/mess.jpg">
        </a>
      </li>
      <li class="layui-nav-item">
        <a href="javascript:;" class="user">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          <span class="username">JunieLuo.KK</span>
        </a>
        
      </li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <a class="menu-btn" href="javascript:;"><i class="layui-icon layui-icon-spread-left" id="LAY_app_flexible"></i></a>
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <!-- <li class="layui-nav-item layui-nav-itemed" ><a href="javascript:;">首页</a></li> -->
        <li class="layui-nav-item">
          <a href="javascript:;">业务管理</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">商品浏览</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">销售管理</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">订单管理</a></dd>
            <dd><a href="javascript:;">购物清单</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">客户通讯录</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">群主管理</a></dd>
            <dd><a href="javascript:;">添加用户</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">统计及报告</a>
        </li>
      </ul>
      <a href="javascript:;" class="layui-btn layui-btn1">退出</a>
    </div>
  </div>
  
  <div class="layui-body report-body clearfix">
    
    <div class="block view-block">
      <div class="view-block-head clearfix">
        <div class="view-block-tab">
          <a href="javascript:;" class="select">画饰浏览量</a>
          <a href="javascript:;">艺术家浏览量</a>
        </div>
        <div class="view-block-date clearfix">
          <div class="view-date-link">
            <a href="javascript:;">今日</a>
            <a href="javascript:;" class="select">本周</a>
            <a href="javascript:;">本月</a>
            <a href="javascript:;">全年</a>
          </div>
          <div class="view-date-inpt">
            <!-- <input type="text" class="layui-input" id="date" placeholder=" 开始时间- 结束时间"> -->
            <input type="text" class="layui-input" id="date3" placeholder="开始时间">
            <input type="text" class="layui-input" id="date4" placeholder="结束时间">
            <button type="button" class="layui-btn">查询</button>
          </div>
        </div>
      </div>
      <div class="view-block-cont clearfix">
        <div class="chart-block">
          <div id="chart" style="width: 100%;height:310px;"></div>
        </div>
        <div class="list-block">
          <div class="box">
            <div class="box-head clearfix">
              <h3>画饰浏览量</h3>
              <a href="javascript:;">查看更多</a>
            </div>
            <div class="box-cont">
              <table class="layui-table">
                <tbody>
                  <tr>
                    <td><span class="bg-num">1</span></td>
                    <td>BQPT2910</td>
                    <td>323,234</td>
                  </tr>
                  <tr>
                    <td><span class="bg-num">2</span></td>
                    <td>BQPT2910</td>
                    <td>323,234</td>
                  </tr>
                  <tr>
                    <td><span class="bg-num">3</span></td>
                    <td>BQPT2910</td>
                    <td>323,234</td>
                  </tr>
                  <tr>
                    <td><span>4</span></td>
                    <td>BQPT2910</td>
                    <td>323,234</td>
                  </tr>
                  <tr>
                    <td><span>5</span></td>
                    <td>BQPT2910</td>
                    <td>323,234</td>
                  </tr>
                  <tr>
                    <td><span>6</span></td>
                    <td>BQPT2910</td>
                    <td>323,234</td>
                  </tr>
                  <tr>
                    <td><span>7</span></td>
                    <td>BQPT2910</td>
                    <td>323,234</td>
                  </tr>
                  <tr>
                    <td><span>8</span></td>
                    <td>BQPT2910</td>
                    <td>323,234</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="box">
            <div class="box-head clearfix">
              <h3>艺术家浏览量</h3>
              <a href="javascript:;">查看更多</a>
            </div>
            <div class="box-cont">
              <table class="layui-table">
                <tbody>
                  <tr>
                    <td><span class="bg-num">1</span></td>
                    <td>David Beckham</td>
                    <td>323,234</td>
                  </tr>
                  <tr>
                    <td><span class="bg-num">2</span></td>
                    <td>David Beckham</td>
                    <td>323,234</td>
                  </tr>
                  <tr>
                    <td><span class="bg-num">3</span></td>
                    <td>David Beckham</td>
                    <td>323,234</td>
                  </tr>
                  <tr>
                    <td><span>4</span></td>
                    <td>BQPT2910</td>
                    <td>323,234</td>
                  </tr>
                  <tr>
                    <td><span>5</span></td>
                    <td>BQPT2910</td>
                    <td>323,234</td>
                  </tr>
                  <tr>
                    <td><span>6</span></td>
                    <td>BQPT2910</td>
                    <td>323,234</td>
                  </tr>
                  <tr>
                    <td><span>7</span></td>
                    <td>BQPT2910</td>
                    <td>323,234</td>
                  </tr>
                  <tr>
                    <td><span>8</span></td>
                    <td>BQPT2910</td>
                    <td>323,234</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="two-block clearfix">
      <div class="block item-block item-block-1">
        <div class="head"><h3>热门搜索</h3></div>
        <div class="content">
          <div class="content-top">
            <ul class="clearfix">
                <li>
                  <div class="title">全球客户数量情况</div>
                  <div class="num">124,543</div>
                </li>
                <li>
                  <div class="title">销售转化率</div>
                  <div class="num">22%</div>
                </li>
                <li>
                  <div class="title">近一个月新增数量</div>
                  <div class="num">66</div>
                </li>
                <li>
                  <div class="title">近六个月新增数量</div>
                  <div class="num">388</div>
                </li>
            </ul>
          </div>
        </div>
        <div class="spread-map"></div>
      </div>
      <div class="block item-block item-block-2">
        <div class="head"><h3>热门搜索</h3></div>
        <div class="content">
          <div class="content-top">
            <ul class="clearfix">
                <li>
                  <div class="title">关键词搜索数</div>
                  <div class="num">25,728</div>
                </li>
                <li>
                  <div class="title">会员关键词搜索数</div>
                  <div class="num">25,728</div>
                </li>
            </ul>
          </div>
          <div class="content-list clearfix">
            <div class="item">
              <table class="layui-table">
                <thead>
                  <tr>
                    <th>排名</th>
                    <th>搜索关键词</th>
                    <th>用户数</th>
                  </tr> 
                </thead>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td>新款连衣裙</td>
                    <td>2,234</td>
                  </tr>
                  <tr>
                    <td>1</td>
                    <td>新款连衣裙</td>
                    <td>2,234</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>新款连衣裙</td>
                    <td>2,234</td>
                  </tr>
                  <tr>
                    <td>4</td>
                    <td>新款连衣裙</td>
                    <td>2,234</td>
                  </tr>
                  <tr>
                    <td>5</td>
                    <td>新款连衣裙</td>
                    <td>2,234</td>
                  </tr>
                  <tr>
                    <td>6</td>
                    <td>新款连衣裙</td>
                    <td>2,234</td>
                  </tr>
                  <tr>
                    <td>7</td>
                    <td>新款连衣裙</td>
                    <td>2,234</td>
                  </tr>
                  <tr>
                    <td>8</td>
                    <td>新款连衣裙</td>
                    <td>2,234</td>
                  </tr>
                  <tr>
                    <td>9</td>
                    <td>新款连衣裙</td>
                    <td>2,234</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="item">
              <table class="layui-table">
                <thead>
                  <tr>
                    <th>排名</th>
                    <th>搜索关键词</th>
                    <th>用户数</th>
                  </tr> 
                </thead>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td>新款连衣裙</td>
                    <td>2,234</td>
                  </tr>
                  <tr>
                    <td>1</td>
                    <td>新款连衣裙</td>
                    <td>2,234</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>新款连衣裙</td>
                    <td>2,234</td>
                  </tr>
                  <tr>
                    <td>4</td>
                    <td>新款连衣裙</td>
                    <td>2,234</td>
                  </tr>
                  <tr>
                    <td>5</td>
                    <td>新款连衣裙</td>
                    <td>2,234</td>
                  </tr>
                  <tr>
                    <td>6</td>
                    <td>新款连衣裙</td>
                    <td>2,234</td>
                  </tr>
                  <tr>
                    <td>7</td>
                    <td>新款连衣裙</td>
                    <td>2,234</td>
                  </tr>
                  <tr>
                    <td>8</td>
                    <td>新款连衣裙</td>
                    <td>2,234</td>
                  </tr>
                  <tr>
                    <td>9</td>
                    <td>新款连衣裙</td>
                    <td>2,234</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="kw-page clearfix">
            <div class="page-num">
              <a href="javascript:;"><i class="layui-icon layui-icon-left"></i></a>
              <a href="javascript:;" class="current">1</a>
              <a href="javascript:;">2</a>
              <a href="javascript:;">3</a>
              <a href="javascript:;">4</a>
              <a href="javascript:;">5</a>
              <a href="javascript:;"><i class="layui-icon layui-icon-right"></i></a>
            </div>
            <div class="page-total">10条/页</div>
            <div class="page-skip">
              <span>跳至 </span>
              <input type="text" name="title" required lay-verify="required" value="1" data-value="1" class="layui-input"> 
              <span>页</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
  
</div>



<script src="./layui/layui.js"></script>
<script src="js/echarts.min.js"></script>
<script>
// 移动端导航条
$(document).on('click','.menu-btn',function(){
  if($(this).find('i').hasClass('layui-icon-shrink-right')){
    $(this).find('i').removeClass('layui-icon-shrink-right');
    $(this).find('i').addClass('layui-icon-spread-left');
    $('.layui-layout-admin .layui-side').animate({
      width:"0"
    },200);

    $('.layui-layout-admin .layui-logo').animate({
      width:"0"
    },200);

    $('.menu-btn').animate({
      left:"10"
    },200);
    $('.layui-layout-admin .layui-body').animate({
      left:"0"
    },200);
  }else{
    $(this).find('i').removeClass('layui-icon-spread-left');
    $(this).find('i').addClass('layui-icon-shrink-right');
    $('.layui-layout-admin .layui-side').animate({
      width:"200px"
    },200);

    $('.layui-layout-admin .layui-logo').animate({
      width:"200px"
    },200);

    $('.menu-btn').animate({
      left:"200px"
    },200);
    $('.layui-layout-admin .layui-body').animate({
      left:"200px"
    },200);
  }
})
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
  
});

//layui框架日期
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,laydate = layui.laydate;

  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标题至少得5个字符啊';
      }
    }
  });
  
  
  //监听提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });
 
  //执行一个laydate实例,日期范围选择
  laydate.render({
    elem: '#date'
    ,range: true //或 range: '~' 来自定义分割字符
  });

  //执行一个laydate实例,移动端日期
  laydate.render({
    elem: '#date3' //指定元素
  });

  laydate.render({
    elem: '#date4' //指定元素
  });

});


//分页框聚焦\失去焦点事件
$(document).on('focus','.page-skip .layui-input',function(){
  $(this).val('');
})

$(document).on('blur','.page-skip .layui-input',function(){
  //文本框初值
  var inpt_val = $(this).data('value');

  if($(this).val() == ''){
    $(this).closest('.page-skip').find('.layui-input').val(inpt_val);
  }

})


//柱状图
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 指定图表的配置项和数据
var option = {
    color: ['#111351'],
    title: {
      text: '网页访问趋势',
      textStyle: {
        fontSize: 14,
        color: '#484848'
      }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                show: true,
                textStyle: {
                  fontSize: 12,
                  color: '#484848'
                }
            },
            axisLine:{
              lineStyle: {
                color: '#E8E8E8'
              }
            },
            //设置网格线颜色
            
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLine: {show:false},
            axisTick: {show:false},
            max: 1000,
            nameTextStyle: {
              fontSize: 12,
              color: '#484848'
            }
        }
    ],
    series: [
        {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [310, 652, 800, 334, 390, 330, 220, 120, 160, 260, 320, 101]
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

</script>
</body>
</html>